/*动态展示数据*/
const ulEl = document.querySelector('.products')
/*筛选*/
const operationEl = document.querySelector('.operation')
const discountEl = operationEl.querySelector('.discount')
/*记录你点击的标签*/
const discountFilters = []
discountEl.addEventListener('click',(event)=>{
    /*笔记本：1；台式机：2；智慧屏：3*/
    let clickType = event.target.dataset.type
    let currentLists = []
    switch (clickType){
        case '1':
            /*过滤数据*/
            clickFilter(event.target)
            currentLists = filterResultList()
            /*先清空*/
            ulEl.innerHTML = ''
            /*重新展示数据*/
            showResultsList(currentLists)
            ;break;
        case '2':
            clickFilter(event.target)
            currentLists = filterResultList()
            ulEl.innerHTML = ''
            showResultsList(currentLists)
            ;break;
        case '3':
            clickFilter(event.target)
            currentLists = filterResultList()
            ulEl.innerHTML = ''
            showResultsList(currentLists)
            ;break;
        default:console.log('undefined');break
    }
})
/*记录选中的服务 并放到数组里面*/
const clickFilter = (domEl)=>{
    if(domEl.classList.contains('active')){
        domEl.classList.remove('active')
        let index = discountFilters.findIndex((item)=>item === domEl.textContent.trim())
        discountFilters.splice(index,1)
    }else{
        domEl.classList.toggle('active')
        discountFilters.push(domEl.textContent.trim())
    }
}
/*对数据进行过滤*/
const filterResultList = () =>{
    return resultList.filter((item)=>{
        let flag = true
        for(const subItem of discountFilters){
            if(!item.services.includes(subItem)){
                flag =  false
                break
            }
        }
        return flag
    })
}
/*数据展示*/
const showResultsList = (showArr) =>{
    for(const item of showArr){
        const itemEl = document.createElement('li')
        itemEl.classList.add('item')
        ulEl.append(itemEl)

        const aEl = document.createElement('a')
        aEl.href='#'
        itemEl.append(aEl)

        const albumEl = document.createElement('img')
        albumEl.classList.add('album')
        const serverUrl = 'https://res1.vmallres.com/pimages'
        albumEl.src=`${serverUrl}${item.photoPath}428_428_${item.photoName}`
        aEl.append(albumEl)

        const nameEl = document.createElement('div')
        nameEl.textContent = item.name
        aEl.append(nameEl)

        const discountEl = document.createElement('div')
        discountEl.textContent = item.promotionInfo
        discountEl.classList.add('discount')
        aEl.append(discountEl)

        const priceEl = document.createElement('div')
        priceEl.textContent = '￥'+item.price
        priceEl.classList.add('price')
        aEl.append(priceEl)


        const serviceEl = document.createElement('div')
        serviceEl.classList.add('service')
        item.promoLabels.forEach((item)=>{
            const spanEl = document.createElement('span')
            spanEl.classList.add('tip')
            spanEl.textContent=item
            serviceEl.append(spanEl)
        })
        aEl.append(serviceEl)


        const commentEl = document.createElement('div')
        commentEl.classList.add('comment')
        /*因为comment里面的子元素是固定的*/
        commentEl.innerHTML=`
                <span>${item.rateCount}人评价</span>
                <span>${item.goodRate}%好评</span>
            `
        aEl.append(commentEl)

    }
    /*添加空的item  解决flex布局最后一行的问题 ，一般是添加列数减1*/
    for(let i=0;i<3;i++){
        const itemEl = document.createElement('li')
        itemEl.classList.add('item')
        itemEl.classList.add('empty')
        ulEl.append(itemEl)
    }

}
showResultsList(resultList)
